<template >

    <el-card>
        <el-row :gutter="16">
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value="amount">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                账户余额
                                <el-tooltip
                                        effect="dark"
                                        content="当前可提现的现金额度"
                                        placement="top"
                                >
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>

                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value="mouthAmount">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                本月收入
                                <el-tooltip
                                        effect="dark"
                                        content="本月收入将会在下一个月汇入到你的账户中"
                                        placement="top"
                                >
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning />
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div v-if="mouthPercent<0" class="statistic-footer">
                        <div class="footer-item">
                            <span>上月同期对比</span>
                            <span  class="red">
              {{-mouthPercent}}%
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
                        </div>
                    </div>

                    <div v-if="mouthPercent>0" class="statistic-footer">
                        <div class="footer-item">
                            <span>上月同期对比</span>
                            <span class="green">
              {{mouthPercent}}%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
                        </div>
                    </div>

                </div>
            </el-col>
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic :value="quarterAmount" title="New transactions today">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                上一季度收入
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                        </div>
                        <div class="footer-item">
                            <el-icon :size="14">
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </el-card>

    <div class="bottom">
        <span class="demonstration"></span>
        <el-date-picker
                v-model="monthDate"
                type="month"
                placeholder="选择您需要查询的月份"
                @change="dateChange"
        />
    </div>

    <el-card >

        <div  class="Statistic" ref="amountRef">
        </div>


    <el-row style="height: 15px"></el-row>
    <!--<el-card>-->

        <h1>本月账单</h1>
        <el-timeline>
            <el-timeline-item size="large" class="custom-timeline" v-for="(item,index) in dateList" :timestamp="item" placement="top">
                <el-card v-if="index<billList.length">
                    <!--<el-text class="mx-1" size="large">完成订单数：</el-text>
                    <el-text class="mx-1" size="small">Small</el-text>-->
                  <!--  <div>完成订单数：{{billList[index].finishNumber}}</div>
                    <div>取消订单数：{{billList[index].cancelledNumber}}</div>-->
                    <el-row style="height: 30px">
                        <el-col :span="6" ><el-text class="mx-1" size="large">订单完成数：</el-text>
                            <el-text >{{billList[index].finishNumber}}</el-text>
                        </el-col>
                        <el-col :span="6" ><el-text class="mx-1" size="large">取消订单数：</el-text>
                            <el-text >{{billList[index].cancelledNumber}}</el-text>
                        </el-col>
                    </el-row>
                    <el-row style="height: 10px"></el-row>
                    <el-row style="height: 35px">
                        <el-col :span="6" ><el-text class="mx-1" size="large">营业额：</el-text></el-col>
                        <el-col :span="6" :offset="12" class="right-align">{{billList[index].amount}}元</el-col>
                    </el-row>
                    <el-row style="height: 35px">
                        <el-col :span="6" ><el-text class="mx-1" size="large">平台服务费：</el-text></el-col>
                        <el-col :span="6" :offset="12" class="right-align">-{{billList[index].adminAmount}}元</el-col>
                    </el-row>
<!--                    <el-row style="height: 50px">
                        <el-col :span="6" ><el-text class="mx-1" size="large" >收入：</el-text></el-col>
                        <el-col :span="6" :offset="12" class="right-align"><h2>={{billList[index].merchantAmount}}元</h2></el-col>
                    </el-row>-->
                    <div class="bottom">
                        <span><el-text class="mx-1" style="font-size: 20px" >最终收入：</el-text></span>
                        <h2>={{billList[index].merchantAmount}}元</h2>
                    </div>
                    <div class="bottom">
                        <span></span>
                        <el-button text class="button" @click="openOrderDetail(item)">查看详情</el-button>
                    </div>
                </el-card>
            </el-timeline-item>
        </el-timeline>
    </el-card>
    <el-dialog destroy-on-close v-model="dialogVisible" title="当日详情" @close="()=>{arrOrder.value=[]}">
        <el-table
                :data="arrOrder"
                style="width: 100%"
        >

            <el-table-column prop="orderTime" label="下单时间" />
            <el-table-column prop="deliveryFee" label="配送费" />
            <el-table-column prop="amount" label="营业额" />
            <el-table-column :span="4" label="订单状态" width="100">
                <template #default="props">
                    <el-text  v-if="props.row.status>2"  >已完成</el-text>
                    <el-text  v-else >已取消</el-text>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="props">
                    <el-button
                            text
                            @click="openDetail(props.row.id)"
                    >查看详情</el-button>
                </template>
            </el-table-column>

        </el-table>
    </el-dialog>
    <el-dialog destroy-on-close v-model="dialog1" title="菜单详情" @close="()=>{arrDish.value=[]}">
        <el-row>
            <el-col
                    v-for="(item,index) in arrDish"
                    :key="index"
                    :span="8"
                    :offset="2"
            >
                <el-card :body-style="{ padding: '0px' }">
                    <img
                            :src=item.image
                            class="image"
                    />
                    <div style="padding: 14px">
                        <div>{{item.dishName}}</div>
                        <span>单价:{{item.price}} </span>

                        <div class="bottom">
                            <span>数量:{{item.number}}</span>
                            <el-button text class="button">商品详情</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </el-dialog>
</template>

<script setup>
    import {ElMessage} from "element-plus";
    import axios from "axios";
    import { reactive,ref, onMounted,onBeforeMount } from 'vue'
    import * as echarts from 'echarts';
    const amountRef = ref()
    let today=new Date()
    let endTime=ref(new Date())
    let beginTime=ref(new Date(today.getFullYear(),today.getMonth(),1))
    let amountList=ref()
    let dateList=ref()
    let mouthPercent=ref()
    let amount=ref()
    let quarterAmount=ref()
    let mouthAmount=ref()
    let billList=reactive()
    let monthDate=ref()
    let dialogVisible=ref(false)
    let arrOrder=ref()
    let dialog1=ref(false);
    let arrDish=ref([])
    function getFinance() {
        axios.get("api/merchant/getTurnOverDate").then(response=>{
            let res=response.data
            amount.value=res.data.amount
            mouthAmount.value=res.data.mouthAmount
            quarterAmount.value=res.data.quarterAmount
            mouthPercent.value=(res.data.mouthPercent)*100
        })
    }
    getFinance()
    function getTebleDate(){

        let beginDate=new Date(beginTime.value).format("yyyy-MM-dd")
        let endDate=new Date(endTime.value).format("yyyy-MM-dd")

        axios.get("api/merchant/getDailyBills",{
            params:{
                begin:beginDate,
                end:endDate
            }
        }).then(res=>{
            console.log(res.data)
            amountList.value=res.data.data.amountList;
            dateList.value=res.data.data.dateList;
            billList=res.data.data.dailyBills;
            let myChart = echarts.init(amountRef.value);
            // 绘制图表
            myChart.setOption( {
                title:{
                    text:'每日营业额'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: dateList.value
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: amountList.value,
                        type: 'line',
                        smooth: true
                    }
                ]
            });
        })
    }
    onBeforeMount(()=>{
        getTebleDate()
    })
    const dateChange=()=>{
        let t=monthDate.value
        let date=new Date(t)
        let year=date.getFullYear()
        let mounth=date.getMonth()
        beginTime.value=new Date(year,mounth,1)
        /*console.log(new Date(beginTime.value).format("yyyy-MM-dd"))*/
        endTime.value=new Date(year,mounth+1,0)
        /*console.log(new Date(endTime.value).format("yyyy-MM-dd"))*/
        getTebleDate()
        getFinance()
    }
    const openOrderDetail=(item)=>{
        let parm=new Date(item).format("yyyy-MM-dd")
        dialogVisible.value=true
        axios.get("api/merchant/getOrdersByDay",{
            params:{
                date:parm
            }
        }).then(res=>{
            arrOrder.value=res.data.data
            console.log(arrOrder.value)
        })
    }
    const openDetail=(orderId)=>{


        axios.get("api/merchant/getOrderDish",{
            params:{
                orderId:orderId
            }
        }).then(response=>{
            dialog1.value=true
            console.log("查询结果")
            console.log(response)
            arrDish=response.data.data
        })
    }
</script>

<style >
    :global(h2#card-usage .example .example-showcase) {
        background-color: var(--el-fill-color) !important;
    }

    .el-statistic {
        --el-statistic-content-font-size: 28px;
    }

    .statistic-card {
        height: 100%;
        padding: 20px;
        border-radius: 4px;
        background-color: var(--el-bg-color-overlay);
    }

    .statistic-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        font-size: 12px;
        color: var(--el-text-color-regular);
        margin-top: 16px;
    }

    .statistic-footer .footer-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .statistic-footer .footer-item span:last-child {
        display: inline-flex;
        align-items: center;
        margin-left: 4px;
    }

    .green {
        color: var(--el-color-success);
    }
    .red {
        color: var(--el-color-error);
    }
    .Statistic{
        width: 100%;
        height: 400px;
    }
    .right-align {
        display: flex;
        justify-content: flex-end;
    }
    .bottom {
        margin-top: 13px;
        line-height: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .demo-image__error .image-slot {
        font-size: 30px;
    }
    .demo-image__error .image-slot .el-icon {
        font-size: 30px;
    }
    .demo-image__error .el-image {
        width: 100%;
        height: 200px;
    }
</style>